<template>
  <table width="100%">
    <tr>
      <th>文章Id</th>
      <th>文章标题</th>
      <th>作者Id</th>
      <th>文章状态</th>
      <th>文章描述</th>
      <th>文章类型</th>
      <th>来源</th>
      <th>封面图</th>
      <th>创建时间</th>
      <th>更新时间</th>
      <th>操作</th>
    </tr>
    <tr v-for="(item, index) in articleList" :key="index">
      <td width="6%" align="center">{{item.articleId}}</td>
      <td width="14%">{{item.articleTitle}}</td>
      <td width="6%" align="center">{{item.authorId}}</td>
      <td width="6%" align="center">
        <span class="status" v-if="item.status === 'NORMAL'" @click="articleSend(item.articleId, item.status, index)">上架</span>
        <span class="status" v-else @click="articleSend(item.articleId, item.status, index)">下架</span>
      </td>
      <td width="14%">{{item.description}}</td>
      <td width="4%" align="center">{{articleOrigin(item.orgin)}}</td>
      <td width="6%" align="center">{{articleType[item.type]}}</td>
      <td width="10%" align="center">
        <a target="_blank" :href="bindImagePath(item.cover)">点击预览</a>
      </td>
      <td width="12%" align="center">{{cutTimeString(item.createTime)}}</td>
      <td width="12%" align="center">{{cutTimeString(item.updateTime)}}</td>
      <td align="center" class="opo">
        <span>查看</span>
        <span @click="modifyArticle(item.articleId, index)">编辑</span>
        <span @click="removeArticle(item.articleId, index)">删除</span>
      </td>
    </tr>
  </table>
</template>

<script>
  import $ from 'jquery'
  export default {
    name: "articleList",
    data () {
      return {
        articleList: [],
        articleType: {
          '1': '前端开发-HTML',
          '2': '前端开发-CSS3',
          '3': '前端开发-JavaScript',
          '4': '设计/美工'
        }
      }
    },
    created () {
      this.getArticleList()
    },
    methods: {
      articleSend (id, status, idx) {
        const type = status === 'NORMAL' ? 'CHECK' : 'NORMAL'
        const authorization = sessionStorage.getItem('token')
        $.ajax({
          url: this.bindAPI(`admin/articleCheck?status=${type}&articleId=${id}`),
          headers: {
            authorization
          },
          complete: e => {
            const data = JSON.parse(e.responseText)
            const { code, message } = data
            if (code === 200) {
              this.articleList[idx].status = type
            }
            this.$message({
              type: code === 200 ? 'success' : 'error',
              message
            })
          }
        })
      },
      articleOrigin (type) {
        return type === 'SELF' ? '原创' : '转载'
      },
      getArticleList () {
        const authorization = sessionStorage.getItem('token')
        this.$emit('table-loading-open', true)
        $.get({
          url: this.bindAPI('/admin/articleList'),
          headers: {
            authorization
          },
          complete: e => {
            const data = JSON.parse(e.responseText)
            this.articleList = data.data.list
            this.$emit('table-loading-close', false)
          }
        })
      },
      modifyArticle (id) {
        this.$router.push(`/management/publish?id=${id}`)
      },
      removeArticle (id, idx) {
        const authorization = sessionStorage.getItem('token')
        this.$alert(`是否确认删除[${id}]文章？`, '警告', {
          type: 'warning',
          callback: e => {
            if (e === 'confirm') {
              $.ajax({
                url: this.bindAPI(`/article/articleRemove?articleId=${id}`),
                headers: {
                  authorization
                },
                complete: e => {
                  const data = JSON.parse(e.responseText)
                  const { code, message } = data
                  if (code === 200) {
                    this.articleList = this.articleList.filter((item, index) => {
                      return index !== idx
                    })
                  }
                  this.$message({
                    type: code === 200 ? 'success' : 'error',
                    message
                  })
                }
              })
            }
          }
        })
      }
    }
  }
</script>

<style>
  table,table th,table tr,table td {
    border-collapse: collapse;
    border: 1px solid #ddd;
  }
  table th {
    font-weight: normal;
    font-size: 14px;
  }
  table td {
    font-size: 14px;
  }
  table td, table th {
    padding: 10px 14px;
  }
  table td a {
    color: #008eff;
    text-decoration: none;
  }
  .opo span {
    padding: 0 2px;
    cursor: pointer;
  }
  .opo span:hover{
    text-decoration: underline;
    color: #008eff;
  }
  .status {
    cursor: pointer;
  }
  .status:hover{
    text-decoration: underline;
    color: #008eff;
  }
</style>